<template>
  <div class="average-age bg-c-base">
    <div class="flex justify-between">
      <div>
        <p>用户年龄分布&平均年龄</p>
        <p class="sub-title">User Total Count</p>
      </div>
      <div class="ml-4">
        <count-to-hy class="age" :end-val="ageDistribution.agedis" suffix="" />
        <span class="unit">岁</span>
      </div>
    </div>
    <div class="average-age-chart">
      <v-chart :options="options"></v-chart>
    </div>
    <div class="flex justify-around">
      <div
        class="flex flex-column align-center"
        v-for="(item, i) in ageDistribution.list"
        :key="i"
      >
        <count-to-hy
          class="font-3 font-weight"
          :end-val="item.conut"
          suffix=""
          :decimals="0"
        />
        <div class="flex align-center">
          <i class="dot"></i>
          <span class="ml-1 font-2">{{ item.dis }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';
import mock from '@/hooks/mock';

export default {
	setup () {
		let { ageDistribution } = reactive(mock());
		const options = reactive({
			tooltip : {
				backgroundColor : 'rgb(000,000,000,.5)',
				trigger : 'axis',
				axisPointer : {
					type : 'shadow',
				},
				textStyle : {
					color : '#fff',
					fontSize : 28,
				},
				padding : 10,
			},
			color : [
				'rgb(116,166,49)',
				'rgb(190,245,99)',
				'rgb(202,252,137)',
				'rgb(251,253,142)',
			],
			grid : {
				left : 40,
				right : 40,
				top : 0,
			},
			dataset : {
				source : [
					['指标', '0-20', '20-30', '30-50', '>50'],
					['年龄分布', 354542, 553715, 773940, 254008],
				],
			},
			xAxis : {
				type : 'value',
				splitLine : { show : false }, //网格线
				max : 354542 + 553715 + 773940 + 254008,
				axisLine : {
					show : true,
					// 线条样式
					lineStyle : {
						color : '#fff',
						width : 3,
					},
				},
				axisTick : { show : false },
				// 字体样式
				axisLabel : {
					color : '#fff', // 颜色
					fontSize : 18,
				},
			},
			yAxis : {
				show : false,
				type : 'category',
			},
			series : [
				{
					type : 'bar',
					barWidth : 15,
					stack : 'total',
				},
				{
					type : 'bar',
					stack : 'total',
				},
				{
					type : 'bar',
					stack : 'total',
				},
				{
					type : 'bar',
					stack : 'total',
				},
			],
		});
		return {
			ageDistribution,
			options,
		};
	},
};
</script>

<style lang="scss" scoped>
.average-age {
  width: 100%;
  height: 320px;
  padding: 20px 40px;
  box-sizing: border-box;
}
.age {
  width: 188px;
  font-size: 68px;
  font-family: DIN;
}
.age-unit {
  font-size: 20px;
  margin-left: 30px;
}
.average-age-chart {
  height: 120px;
}
.age-wrapper {
  width: 300px;
  border: 1px solid red;
}
.dot {
  background: #c5fb79;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
</style>
